<template>
  <el-container class="order-page panel-block">
    <el-header class="sa-header">
      <el-tabs class="sa-tabs" v-model="filterParams.data.status" @tab-change="getData(1)">
        <el-tab-pane
          v-for="(sl, key) in statusList"
          :key="sl"
          :label="`${sl.label}${sl.num ? '(' + sl.num + ')' : ''}`"
          :name="key"
        ></el-tab-pane>
      </el-tabs>
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">充值订单</span>
          <search-condition
            :conditionLabel="filterParams.conditionLabel"
            @deleteFilter="deleteFilter"
          ></search-condition>
        </div>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
          <el-button
            v-auth="'shop.admin.trade.order.export'"
            :loading="exportLoading"
            :disabled="exportLoading"
            @click="onExport('export')"
            >订单导出</el-button
          >
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0" v-loading="loading">
      <div class="sa-table-wrap">
        <el-table height="100%" class="sa-table" :data="table.data" row-key="id" stripe>
          <template #empty>
            <sa-empty />
          </template>
          <el-table-column label="ID" min-width="90">
            <template #default="scope">
              <span class="sa-table-line-1">
                {{ scope.row.id || '-' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" min-width="260">
            <template #default="scope">
              <div class="order-sn sa-flex">
                {{ scope.row.order_sn || '-' }}
                <sa-svg
                  class="copy sa-m-l-4 cursor-pointer"
                  name="sa-copy"
                  @click="useClip(scope.row.order_sn)"
                ></sa-svg>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户信息" min-width="216">
            <template #default="scope">
              <sa-user-profile :user="scope.row.user" :id="scope.row.user_id" />
            </template>
          </el-table-column>
          <el-table-column label="订单总金额" min-width="120" align="center">
            <template #default="scope">
              <span class="sa-table-line-1"> {{ scope.row.order_amount || '-' }}元 </span>
            </template>
          </el-table-column>
          <el-table-column label="支付总金额" min-width="120" align="center">
            <template #default="scope">
              <span class="sa-table-line-1"> {{ scope.row.pay_fee || '-' }}元 </span>
            </template>
          </el-table-column>
          <el-table-column label="支付状态" min-width="80" align="center">
            <template #default="scope">
              <span
                class="sa-table-line-1"
                :class="
                  scope.row.status == 'completed'
                    ? 'sa-color--success'
                    : scope.row.status == 'closed'
                    ? 'sa-color--danger'
                    : scope.row.status == 'cancel'
                    ? 'sa-color--info'
                    : scope.row.status == 'unpaid'
                    ? 'sa-color--warning'
                    : ''
                "
              >
                {{ scope.row.status_text }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="支付方式" min-width="120" align="center">
            <template #default="scope">
              <div class="sa-flex sa-row-center">
                <img
                  :src="`./static/images/shop/order/${
                    scope.row.pay_type_text == '支付宝'
                      ? 'ali'
                      : scope.row.pay_type_text == '微信支付'
                      ? 'wechaticon'
                      : scope.row.pay_type_text == '钱包支付'
                      ? 'walleticon'
                      : 'score'
                  }.png`"
                  class="pay-img sa-m-r-8"
                  v-if="scope.row.pay_type_text"
                />
                <div>{{ scope.row.pay_type_text || '-' }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="充值时间" min-width="180" align="center">
            <template #default="scope">
              <span class="sa-table-line-1">
                {{ scope.row.create_time || '-' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="100">
            <template #default="scope">
              <el-button
                v-auth="'shop.admin.trade.order.detail'"
                class="is-link"
                type="primary"
                @click="getDetail(scope.row.id)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <sa-view-bar>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
    <el-dialog
      v-model="dialogDetail"
      class="trade-dialog"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <template #header>
        <div class="dialog-header sa-flex sa-row-between">
          <div class="dialog-header-line"></div>
          <div>充值详情</div>
          <div class="sa-flex sa-row-center sa-m-l-8 close-btn" @click="dialogDetail = false">
            <sa-svg name="sa-close" size="16" class="cursor-pointer"></sa-svg>
          </div>
        </div>
      </template>
      <template #default>
        <div>
          <div class="sa-flex sa-m-b-24">
            <div class="sa-w-100 sa-flex sa-row-right label-width"> 用户信息 </div>
            <div class="sa-flex sa-m-l-12" v-if="detailList.data.user">
              <sa-user-profile :user="detailList.data.user" :id="detailList.data.user_id" />
            </div>
          </div>
          <div class="sa-flex sa-m-b-24">
            <div class="sa-w-100 sa-flex sa-row-right label-width"> 订单总金额 </div>
            <div class="sa-m-l-12">{{ detailList.data.order_amount }}元</div>
          </div>
          <div class="sa-flex sa-m-b-24">
            <div class="sa-w-100 sa-flex sa-row-right label-width"> 支付总金额 </div>
            <div class="sa-m-l-12">{{ detailList.data.pay_fee }}元</div>
          </div>
          <div class="sa-flex sa-m-b-24">
            <div class="sa-w-100 sa-flex sa-row-right label-width"> 支付状态 </div>
            <div
              class="sa-m-l-12"
              :class="
                detailList.data.status == 'completed'
                  ? 'sa-color--success'
                  : detailList.data.status == 'closed'
                  ? 'sa-color--danger'
                  : detailList.data.status == 'cancel'
                  ? 'sa-color--info'
                  : detailList.data.status == 'unpaid'
                  ? 'sa-color--warning'
                  : ''
              "
            >
              {{ detailList.data.status_text }}
            </div>
          </div>
          <div class="sa-flex sa-m-b-24">
            <div class="sa-w-100 sa-flex sa-row-right label-width"> 支付方式 </div>
            <div class="sa-flex sa-m-l-12">
              <img
                :src="`./static/images/shop/order/${
                  detailList.data.pay_type_text == '支付宝'
                    ? 'ali'
                    : detailList.data.pay_type_text == '微信支付'
                    ? 'wechaticon'
                    : detailList.data.pay_type_text == '钱包支付'
                    ? 'walleticon'
                    : 'score'
                }.png`"
                class="pay-img sa-m-r-8"
                v-if="detailList.data.pay_type_text"
              />
              {{ detailList.data.pay_type_text || '-' }}
            </div>
          </div>
          <div class="sa-flex sa-m-b-24">
            <div class="sa-w-100 sa-flex sa-row-right label-width"> 订单编号 </div>
            <div class="sa-m-l-12">{{ detailList.data.order_sn }}</div>
          </div>
          <div class="sa-flex sa-m-b-24">
            <div class="sa-w-100 sa-flex sa-row-right label-width"> 订单来源 </div>
            <div class="sa-m-l-12">{{ detailList.data.platform_text }}</div>
          </div>
          <div class="sa-flex sa-m-b-24">
            <div class="sa-w-100 sa-flex sa-row-right label-width"> 下单时间 </div>
            <div class="sa-m-l-12">{{ detailList.data.create_time }}</div>
          </div>
          <div class="sa-flex sa-m-b-24">
            <div class="sa-w-100 sa-flex sa-row-right label-width"> 支付时间 </div>
            <div class="sa-m-l-12">{{ detailList.data.paid_time }}</div>
          </div>
          <div class="sa-flex sa-m-b-24">
            <div class="sa-w-100 sa-flex sa-row-right label-width"> 用户备注 </div>
            <div class="sa-m-l-12">{{ detailList.data.remark || '-' }}</div>
          </div>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>
<script>
  export default {
    name: 'shop.admin.trade.order',
  };
</script>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from '../trade.service';
  import { usePagination } from '@/sheep/hooks';
  import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
  import { composeFilter } from '@/sheep/utils';
  import useClip from '@/sheep/utils/clipboard.js';
  import { cloneDeep } from 'lodash';
  // import StatusButton from "./components/status.vue";

  const dialogDetail = ref(false);
  // getType
  const statusList = reactive({});
  async function getType() {
    const { data } = await api.order.getType();
    for (var key in data) {
      if (filterParams.tools[key] && key != 'status') {
        filterParams.tools[key].options.data = data[key];
      } else if (key == 'pay_type') {
        filterParams.tools['pay.pay_type'].options.data = data[key];
      } else if (key == 'status') {
        data[key].forEach((s) => {
          statusList[s.type] = { label: s.name, num: 0 };
        });
      }
    }
  }

  const filterParams = reactive({
    tools: {
      status: { label: '订单状态', value: 'all' },
      order: {
        type: 'tinputprepend',
        label: '请输入查询内容',
        field: 'order',
        order: {
          field: 'id',
          value: '',
        },
        options: [
          {
            label: '订单ID',
            value: 'id',
          },
          {
            label: '订单编号',
            value: 'order_sn',
          },
          {
            label: '支付单号',
            value: 'pay.pay_sn',
          },
        ],
      },
      user: {
        type: 'tinputprepend',
        label: '请输入查询内容',
        field: 'user',
        user: {
          field: 'user_id',
          value: '',
        },
        options: [
          {
            label: '用户ID',
            value: 'user_id',
          },
          {
            label: '用户昵称',
            value: 'user.nickname',
          },
          {
            label: '用户手机号',
            value: 'user.mobile',
          },
        ],
      },
      platform: {
        type: 'tselect',
        label: '订单来源',
        field: 'platform',
        value: '',
        options: {
          data: [],
          props: {
            label: 'name',
            value: 'type',
          },
        },
      },
      'pay.pay_type': {
        type: 'tselect',
        label: '支付方式',
        field: 'pay.pay_type',
        value: '',
        options: {
          data: [],
          props: {
            label: 'name',
            value: 'type',
          },
        },
      },
      create_time: {
        type: 'tdatetimerange',
        label: '下单时间',
        field: 'create_time',
        value: [],
      },
    },
    data: {
      status: 'all',
      order: { field: 'id', value: '' },
      user: { field: 'user_id', value: '' },
      platform: '',
      'pay.pay_type': '',
      create_time: [],
    },
    conditionLabel: {},
  });
  const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

  const loading = ref(true);

  // 导出订单
  const exportLoading = ref(false);
  async function onExport(type) {
    exportLoading.value = true;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      order_sn: 'like',
      'pay.pay_sn': 'like',
      'user.nickname': 'like',
      'user.mobile': 'like',
      create_time: 'range',
    });
    await api.order.export(type, { search: search.search });
    exportLoading.value = false;
  }
  // 表格
  const table = reactive({
    data: [],
    order: '',
    sort: '',
    selected: [],
  });
  const detailList = reactive({
    data: {},
  });
  const { pageData } = usePagination();
  //获取详情
  async function getDetail(id) {
    dialogDetail.value = true;
    const { error, data } = await api.order.detail(id);
    error === 0 && (detailList.data = data);
  }
  // 获取数据
  async function getData(page) {
    loading.value = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      order_sn: 'like',
      'pay.pay_sn': 'like',
      'user.nickname': 'like',
      'user.mobile': 'like',
      create_time: 'range',
    });
    const { error, data } = await api.order.list({
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
    });
    if (error === 0) {
      table.data = data.orders.data;
      pageData.page = data.orders.current_page;
      pageData.list_rows = data.orders.per_page;
      pageData.total = data.orders.total;
      for (var key in statusList) {
        statusList[key].num = data[key];
      }
    }
    loading.value = false;
  }
  const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex == 1) {
      return [1, 7];
    } else if (
      columnIndex == 2 ||
      columnIndex == 3 ||
      columnIndex == 4 ||
      columnIndex == 5 ||
      columnIndex == 6
    ) {
      return [0, 0];
    }
  };

  onMounted(async () => {
    await getType();
    getData();
  });
</script>
<style lang="scss" scoped>
  .order-page {
    .el-main {
      background: var(--sa-background-assist);
      border-radius: 0 0 8px 8px;
    }
    .sa-table-wrap {
      height: 100%;
    }
  }
  .order-sn {
    min-width: 228px;
    height: 14px;
    font-size: 12px;
    color: var(--sa-subtitle);
    .copy {
      width: 12px !important;
      height: 12px !important;
    }
  }
  .pay-img {
    width: 24px;
    height: 24px;
  }
  .label-width {
    min-width: 100px;
  }
  .dialog-header {
    position: relative;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    .dialog-header-line {
      width: 64px;
      height: 6px;
      background: rgba(128, 106, 246, 0.3);
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  .close-btn {
    position: relative;
    &:hover {
      position: absolute;
      right: -2px;
      top: -2px;
      width: 20px;
      height: 20px;
      background: var(--el-color-primary);
      border-radius: 20px;
      color: #fff;
    }
  }
</style>
<style lang="scss">
  .trade-dialog {
    border-radius: 8px;
    min-width: 340px;
    .el-dialog__body {
      border-top: 1px solid #d9d9d9 !important;
    }
    .el-dialog__header {
      padding: 15px 24px;
      margin: 0;
    }
    @media only screen and (max-width: 768px) {
      --el-dialog-margin-top: 0;
      min-width: 100%;
      height: 100%;
      margin: 0;
      border-radius: 0;
    }
  }
</style>
